<template>
  <div class="banner">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="item in bannerList"
          v-if="bannerList.length > 0"
          @click="handleToArticle(item.id)"
        >
          <img v-lazy="item.titleImg" />
          <div class="title">
            {{ item.title }}
          </div>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div
        class="swiper-button-prev"
        @mouseenter="enter('pre')"
        @mouseleave="leave('pre')"
      >
        <svg-icon
          name="arrow-left"
          width="36"
          height="36"
          :color="
            preFlag ? 'rgb(100 100 100 / 100%)' : 'rgb(100 100 100 / 50%)'
          "
        ></svg-icon>
      </div>
      <div
        class="swiper-button-next"
        @mouseenter="enter('next')"
        @mouseleave="leave('next')"
      >
        <svg-icon
          name="arrow-right"
          width="36"
          height="36"
          :color="
            nextFlag ? 'rgb(100 100 100 / 100%)' : 'rgb(100 100 100 / 50%)'
          "
        ></svg-icon>
      </div>
    </div>
  </div>
</template>
<script setup>
import Swiper from "swiper";
import { ref, onMounted, nextTick } from "vue";
import {useRouter} from "vue-router"
const router = useRouter();
// 因为版本原因需要引入SwiperCore使用插件（自动播放）,引入之后设置就有用了。
import SwiperCore, { Autoplay, Pagination, Navigation } from "swiper/core";
import { getArticleList } from "@/api/article.js";
SwiperCore.use([Autoplay, Pagination, Navigation]);
const bannerList = ref([]);
let flag = ref(false);
var mySwiper;
onMounted(() => {
  getBanner();
});



const init = () => {
  console.log("shuju",bannerList.value)

  if(flag.value==false) return;
  console.log("shuju",bannerList.value)
  mySwiper = new Swiper(".swiper", {
    slidesPerView: 1,
    autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: false, //用户操作之后停止自动
    },
    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      type: "bullets",
      clickable: true,
      bulletActiveClass: "my-bullet-active", //选中的原点样式
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
};

const getBanner = async () => {
  const res = await getArticleList({
    isBanner: 1,
  });
  bannerList.value = res.data;
  console.log(res, "轮播推荐");
  nextTick(() => {
    if (flag.value == false) {
      flag.value = true;
      init();

    }
  });
};

const handleToArticle = (id) =>{
  router.push(`/article/${id}`)
}

// 控制轮播图左右按钮的颜色透明度
let preFlag = ref(false);
let nextFlag = ref(false);

const leave = (flag) => {
  if (flag == "next") {
    nextFlag.value = false;
  } else {
    preFlag.value = false;
  }
};

const enter = (flag) => {
  if (flag == "next") {
    nextFlag.value = true;
  } else {
    preFlag.value = true;
  }
};

// 引入Navigation后，不需要手动设置方法了。
// const next = () => {
//   mySwiper.slideNext();
// };
// const pre = () => {
//   mySwiper.slidePrev();
// };
</script>
<style lang="scss" scoped>
.swiper-button-next::after,
.swiper-button-prev::after {
  content: "";
}
.banner {
  flex: 2;
  height: 100%;
  overflow: hidden;
  position: relative;
  .swiper {
    height: 100%;
    width: 100%;
    .swiper-slide {
      width: 100%;
      position: relative;
      cursor: pointer;

      .title {
        position: absolute;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        bottom: 50px;
        color: #fff;
        background: rgba(0, 0, 0, 0.3);
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .swiper-button-next:after {
      position: absolute;
      right: 0;
    }
  }
}
// 覆盖原点样式
:deep
  .swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  width: 30px;
  height: 3px;
  border-radius: 0;
  &.my-bullet-active {
    background: #fff;
    opacity: 1;
  }
}
</style>
